import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import React from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

// 工具栏选项类型定义
export interface ToolbarItem {
  key: string;
  label: string;
  icon: keyof typeof MaterialIcons.glyphMap;
}

// ScrollableToolbar组件属性类型
interface ScrollableToolbarProps {
  tools: ToolbarItem[];
  currentTool: string;
  onToolPress: (toolKey: string) => void;
  style?: any;
  showToolbar?: boolean;
}

/**
 * 可滚动的工具栏组件
 * 支持水平滚动，适用于工具选项较多的场景
 */
export const ScrollableToolbar: React.FC<ScrollableToolbarProps> = ({
  tools,
  currentTool,
  onToolPress,
  showToolbar = true,
}) => {
  const insets = useSafeAreaInsets();
  if (!showToolbar) {
    return null;
  }
  return (
    <View style={[styles.toolbar, { paddingBottom: insets.bottom + 10 }]}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        {tools.map((tool) => (
          <TouchableOpacity
            key={tool.key}
            style={[ styles.toolButton, currentTool === tool.key && styles.toolButtonActive ]}
            onPress={() => onToolPress(tool.key)}
          >
            {tool.label === "滤镜" ? (
              <Ionicons name="color-filter-outline" size={22} color={currentTool === tool.key ? "#F51A44" : "#222"}/>
            ) : (
              <MaterialIcons name={tool.icon} size={22} color={currentTool === tool.key ? "#F51A44" : "#191919"}/>
            )}
            <Text style={[ styles.toolButtonText, currentTool === tool.key && styles.toolButtonTextActive,]}>
              {tool.label}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  toolbar: {
    backgroundColor: "#FEFEFE",
    boxSizing: "border-box",
    paddingTop: 15,
    borderTopWidth: 1,
    borderColor: '#E5E5E5',
  },
  scrollContent: {
    alignItems: "center",
    paddingHorizontal: 10,
  },
  toolButton: {
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 10,
    borderRadius: 8,
    marginHorizontal: 4,
  },
  toolButtonActive: {
    // backgroundColor: '#f0f0f0',
  },
  toolButtonText: {
    fontSize: 10,
    color: "#222",
    marginTop: 6,
    textAlign: "center",
  },
  toolButtonTextActive: {
    color: "#ff7a45",
    fontWeight: "500",
  },
});

export default ScrollableToolbar;
